16. CSS Shapes using Clip-path

I. Clip-path Circle

Explanation: clip-path se aap element ko circular ya kisi specific shape me dikh sakte ho. Yahan hum circle() ka use kar rahe hain.

<style> .circle { width: 200px; height: 200px; background: orange; clip-path: circle(50%); } </style> <div class="circle"></div> Run Code

II. Ellipse Shape

Explanation: ellipse() shape se oval ya ellipse create kar sakte hain using clip-path.

<style> .ellipse { width: 250px; height: 150px; background: #28a745; clip-path: ellipse(60% 40% at 50% 50%); } </style> <div class="ellipse"></div> Run Code

III. Polygon Shape

Explanation: Polygon coordinates dekar custom triangle, star, ya any polygon shape banayi ja sakti hai.

<style> .polygon { width: 220px; height: 200px; background: #007bff; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } </style> <div class="polygon"></div> Run Code

IV. Complex Shapes (Multiple Layers)

Explanation: Complex designs create karne ke liye aap multiple layered divs aur clip-path use kar sakte ho.

<style> .layer1, .layer2 { width: 200px; height: 200px; position: absolute; } .layer1 { background: #ff6347; clip-path: circle(50%); } .layer2 { background: #6a5acd; clip-path: polygon(0 0, 100% 0, 100% 100%); top: 0; left: 0; mix-blend-mode: multiply; } .wrapper { position: relative; width: 200px; height: 200px; } </style> <div class="wrapper"> <div class="layer1"></div> <div class="layer2"></div> </div> Run Code